<!-- 目标管理 -->
<template>
  <div class="target-config">
    <Row class="detail_title" type="flex" justify="space-between">
      <Col span="8">
        <span class="title_text">目标年份：</span>
        <DatePicker
          :clearable="false"
          type="year"
          v-model="curYear"
          @on-change="init"
          :options="options"
          style="width: 240px"></DatePicker>
      </Col>
    </Row>
    <Tabs ref="targetTabs" v-model="curState" :animated="false" @on-click="onChangeTab" name="targetConfig">
      <TabPane label="线索目标" name="CLUETARGET" tab="targetConfig"></TabPane>
      <TabPane label="来人目标" name="VISITOR" tab="targetConfig"></TabPane>
      <TabPane label="认购目标" name="SUBSCRIPTION" tab="targetConfig"></TabPane>
      <TabPane label="签约目标" name="CONTRACT" tab="targetConfig"></TabPane>
      <TabPane label="回款目标" name="PAYMENT" tab="targetConfig"></TabPane>
    </Tabs>
    <div class="flex flex-horizontal-between">
      <div class="tip-text">
        <Icon type="md-alert" :size="18" color="#FAAD14" style="line-height: 26px; margin-right: 10px" />
        <p>
          1. 您可在当月设定次月的目标，在此期间您可对目标进行任意调整，系统不会记录您的调整差值；
          <br />
          2.
          <span style="color: #e9142e">次月5日，上月的目标将被锁定，</span>
          您可对已锁定的目标进行调整，系统将记录每次调整的差值
        </p>
      </div>
      <Button
        style="display: flex; align-self: end; line-height: 2"
        type="success"
        @click="exportExcel"
        v-if="unlocking('0102010605')">
        导出Excel
      </Button>
    </div>
    <dt-grid ref="table" :onFetch="onFetch" :row-style="rowStyle"></dt-grid>
    <set-clue-or-visitor ref="setClueOrVisitor" @success="init" />
    <set-order-target ref="setOrderTarget" @success="init" />
    <set-payment ref="setPayment" @success="init" />
  </div>
</template>

<script>
  import moment from 'moment'
  import column from './opt/columns'
  import targetApi from '@/biz/buildingManagement/target'
  import setClueOrVisitor from './components/setClueOrVisitor'
  import setOrderTarget from './components/setOrderTarget'
  import setPayment from './components/setPayment.vue'
  export default {
    components: {
      setClueOrVisitor,
      setOrderTarget,
      setPayment
    },
    data() {
      return {
        curState: 'CLUETARGET',
        oldState: 'CLUETARGET',
        curYear: moment(new Date()).format('YYYY'),
        exportVisible: false,
        options: {
          disabledDate: (date) => {
            const disabledDate = date.getFullYear()
            const currentYear = new Date().getFullYear()
            return !(disabledDate >= currentYear - 2 && disabledDate <= currentYear)
          }
        }
      }
    },
    methods: {
      rowStyle(e) {
        return {
          'background-color': e.row.state != 1 ? '#fff' : '#e6f6ff'
        }
      },
      onChangeTab(val) {
        if (val == this.oldState) return false
        this.oldState = val
        this.init()
      },
      onSuccess() {
        this.init()
      },
      init() {
        this.$refs.table.init(this, new column(this))
        this.$refs.table.fetch()
      },
      onFetch() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          housesId: this.$dt.buildInfo().housesId,
          year: moment(this.curYear).format('YYYY')
        }
        return targetApi.getTarget(params, this.curState).then((res) => {
          return res
        })
      },
      //导出
      exportExcel() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          housesId: this.$dt.buildInfo().housesId,
          year: moment(this.curYear).format('YYYY')
        }
        targetApi.exportSetting(params, this.curState)
      },
      //查看目标
      checkDetail(row) {
        row.curState = this.curState
        row.isCheck = true
        row.setGoalType = row.state == 1 ? 'SET' : 'ADJUST'
        row.date = moment(this.curYear).format('YYYY') + '年' + row.month + '月'
        if (this.curState == 'CLUETARGET' || this.curState == 'VISITOR') {
          this.$refs.setClueOrVisitor.create(row)
        } else if (this.curState == 'SUBSCRIPTION' || this.curState == 'CONTRACT') {
          this.$refs.setOrderTarget.create(row)
        } else {
          this.$refs.setPayment.create(row)
        }
      },
      //设定目标
      setGoal(row) {
        row.curState = this.curState
        row.isCheck = false
        row.setGoalType = 'SET'
        row.date = moment(this.curYear).format('YYYY') + '年' + row.month + '月'
        if (this.curState == 'CLUETARGET' || this.curState == 'VISITOR') {
          this.$refs.setClueOrVisitor.create(row)
        } else if (this.curState == 'SUBSCRIPTION' || this.curState == 'CONTRACT') {
          this.$refs.setOrderTarget.create(row)
        } else {
          this.$refs.setPayment.create(row)
        }
      },
      //调整目标
      adjustGoal(row) {
        row.curState = this.curState
        row.isCheck = false
        row.setGoalType = 'ADJUST'
        row.date = moment(this.curYear).format('YYYY') + '年' + row.month + '月'
        if (this.curState == 'CLUETARGET' || this.curState == 'VISITOR') {
          this.$refs.setClueOrVisitor.create(row)
        } else if (this.curState == 'SUBSCRIPTION' || this.curState == 'CONTRACT') {
          this.$refs.setOrderTarget.create(row)
        } else {
          this.$refs.setPayment.create(row)
        }
      }
    },
    mounted() {
      if (this.$route.params.currentTab) {
        this.curState = this.$route.params.currentTab
        this.oldState = this.$route.params.currentTab
      }
      this.init()
    }
  }
</script>
<style lang="scss" scoped>
  .target-config {
    .detail_title {
      margin-bottom: 30px;
    }
    .tip-text {
      display: flex;
      padding: 10px;
      background-color: rgba(254, 252, 236, 1);
    }
  }
</style>
